import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { useSortable } from './use-sortable';
import { ref, onMounted } from 'vue';

const meta = {
  title: 'Hook/useSortable',
  tags: ['autodocs'],
  render: () => ({
    components: {},
    setup() {
      const sortableContainer = ref<HTMLElement | null>(null);

      onMounted(async () => {
        await nextTick()
        const el = sortableContainer.value
        if (!el) return

        const { initializeSortable } = useSortable(el, {
          animation: 150,
          ghostClass: 'blue-background-class'
        })
        initializeSortable()
      });

      return { sortableContainer };
    },
    template: `    
      <ul id="items" ref="sortableContainer">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
      </ul>
    `
  })
} satisfies Meta;

export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  name: '基础用法',
  args: {},
};